Mở khóa các khả năng CSS nâng cao với @property, một tính năng mạnh mẽ để đăng ký và tùy chỉnh các thuộc tính CSS. Tìm hiểu cách tận dụng nó để cải thiện kiểu dáng và kiểm soát hoạt ảnh.
Làm chủ CSS: Đăng ký thuộc tính tùy chỉnh với @property
Thuộc tính tùy chỉnh (còn được gọi là biến CSS) đã cách mạng hóa cách chúng ta viết và duy trì CSS. Chúng cho phép chúng ta xác định các giá trị có thể tái sử dụng, làm cho biểu định kiểu của chúng ta linh hoạt và dễ bảo trì hơn. Nhưng điều gì sẽ xảy ra nếu bạn có thể vượt ra ngoài việc chỉ định nghĩa các giá trị? Điều gì sẽ xảy ra nếu bạn có thể xác định kiểu giá trị mà một thuộc tính tùy chỉnh nắm giữ, cùng với giá trị ban đầu và hành vi kế thừa của nó? Đó là nơi @property xuất hiện.
@property là gì?
@property là một quy tắc CSS cho phép bạn đăng ký rõ ràng một thuộc tính tùy chỉnh với trình duyệt. Quá trình đăng ký này cung cấp cho trình duyệt thông tin về kiểu dự kiến của thuộc tính, giá trị ban đầu của nó và liệu nó có nên kế thừa từ phần tử cha của nó hay không. Điều này mở ra một số khả năng nâng cao, bao gồm:
- Kiểm tra kiểu: Đảm bảo thuộc tính tùy chỉnh được gán một giá trị thuộc kiểu chính xác.
- Hoạt ảnh: Cho phép chuyển đổi và hoạt ảnh mượt mà cho các thuộc tính tùy chỉnh của các kiểu cụ thể, như số hoặc màu sắc.
- Giá trị mặc định: Cung cấp một giá trị dự phòng nếu thuộc tính tùy chỉnh không được xác định rõ ràng.
- Kiểm soát kế thừa: Xác định xem thuộc tính tùy chỉnh có kế thừa giá trị của nó từ phần tử cha của nó hay không.
Hãy nghĩ về nó như là thêm tính an toàn kiểu vào các biến CSS của bạn. Nó cho phép bạn tạo các biểu định kiểu mạnh mẽ và có thể dự đoán hơn.
Cú pháp của @property
Quy tắc @property tuân theo cú pháp cơ bản này:
@property --property-name {
syntax: '';
inherits: true | false;
initial-value: ;
}
Hãy chia nhỏ từng phần:
--property-name: Tên của thuộc tính tùy chỉnh bạn muốn đăng ký. Nó phải bắt đầu bằng hai dấu gạch ngang (--).syntax: Xác định kiểu giá trị dự kiến cho thuộc tính. Điều này rất quan trọng để kiểm tra kiểu và hoạt ảnh. Chúng ta sẽ khám phá các giá trị cú pháp có sẵn một cách chi tiết bên dưới.inherits: Một giá trị boolean cho biết liệu thuộc tính có nên kế thừa từ phần tử cha của nó hay không. Mặc định làfalsenếu không được chỉ định.initial-value: Giá trị mặc định cho thuộc tính nếu nó không được đặt rõ ràng trên một phần tử. Điều này đảm bảo rằng một giá trị dự phòng luôn khả dụng.
Tìm hiểu về Bộ mô tả syntax
Bộ mô tả syntax là phần quan trọng nhất của quy tắc @property. Nó cho trình duyệt biết loại giá trị nào cần mong đợi cho thuộc tính tùy chỉnh. Dưới đây là một số giá trị cú pháp phổ biến:
*: Cho phép bất kỳ giá trị nào. Đây là cú pháp cho phép nhiều nhất và về cơ bản tái tạo hành vi của một biến CSS tiêu chuẩn mà không cần đăng ký. Sử dụng nó một cách tiết kiệm.<length>: Mong đợi một giá trị độ dài (ví dụ:10px,2em,50%). Điều này cho phép hoạt ảnh mượt mà giữa các giá trị độ dài khác nhau.<number>: Mong đợi một giá trị số (ví dụ:1,3.14,-5). Hữu ích cho việc tạo hoạt ảnh cho các thuộc tính số như độ mờ hoặc tỷ lệ.<percentage>: Mong đợi một giá trị phần trăm (ví dụ:25%,100%).<color>: Mong đợi một giá trị màu (ví dụ:#f00,rgb(255, 0, 0),hsl(0, 100%, 50%)). Cho phép chuyển đổi và hoạt ảnh màu mượt mà.<image>: Mong đợi một giá trị hình ảnh (ví dụ:url(image.jpg),linear-gradient(...)).<integer>: Mong đợi một giá trị số nguyên (ví dụ:1,-10,0).<angle>: Mong đợi một giá trị góc (ví dụ:45deg,0.5rad,200grad). Hữu ích cho việc tạo hoạt ảnh xoay.<time>: Mong đợi một giá trị thời gian (ví dụ:1s,500ms). Hữu ích để kiểm soát thời lượng hoặc độ trễ hoạt ảnh thông qua các thuộc tính tùy chỉnh.<resolution>: Mong đợi một giá trị độ phân giải (ví dụ:300dpi,96dpi).<transform-list>: Mong đợi một danh sách các hàm biến đổi (ví dụ:translateX(10px) rotate(45deg)). Cho phép tạo hoạt ảnh cho các phép biến đổi phức tạp.<custom-ident>: Mong đợi một định danh tùy chỉnh (một chuỗi). Tương tự như mộtenum.<string>: Mong đợi một giá trị chuỗi (ví dụ:"Hello World"). Hãy cẩn thận với điều này, vì việc tạo hoạt ảnh cho các chuỗi thường không được hỗ trợ.- Cú pháp tùy chỉnh: Bạn có thể tạo cú pháp phức tạp hơn bằng cách sử dụng kết hợp các cú pháp trên và các toán tử
|(hoặc), `[]` (nhóm), `+` (một hoặc nhiều), `*` (không hoặc nhiều) và `?` (không hoặc một). Ví dụ:<length> | <percentage>cho phép giá trị độ dài hoặc giá trị phần trăm.
Chọn syntax chính xác là điều cần thiết để tận dụng toàn bộ sức mạnh của @property.
Ví dụ thực tế về @property
Hãy xem một số ví dụ thực tế về cách sử dụng @property trong CSS của bạn.
Ví dụ 1: Tạo hoạt ảnh cho Màu nền
Giả sử bạn muốn tạo hoạt ảnh cho màu nền của một nút. Bạn có thể sử dụng @property để đăng ký một thuộc tính tùy chỉnh cho màu nền và sau đó tạo hoạt ảnh cho nó bằng cách sử dụng chuyển đổi CSS.
@property --bg-color {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
.button {
background-color: var(--bg-color);
transition: --bg-color 0.3s ease;
}
.button:hover {
--bg-color: #f00; /* Red */
}
Trong ví dụ này, chúng ta đăng ký thuộc tính tùy chỉnh --bg-color với cú pháp <color>, có nghĩa là nó mong đợi một giá trị màu. initial-value được đặt thành màu trắng (#fff). Khi nút được di chuột qua, --bg-color được thay đổi thành màu đỏ (#f00) và quá trình chuyển đổi tạo hoạt ảnh mượt mà cho sự thay đổi màu nền.
Ví dụ 2: Kiểm soát Bán kính đường viền bằng một Số
Bạn có thể sử dụng @property để kiểm soát bán kính đường viền của một phần tử và tạo hoạt ảnh cho nó.
@property --border-radius {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.rounded-box {
border-radius: var(--border-radius);
transition: --border-radius 0.5s ease;
}
.rounded-box:hover {
--border-radius: 20px;
}
Ở đây, chúng ta đăng ký --border-radius là một <length>, đảm bảo nó chấp nhận các giá trị độ dài như px, em hoặc %. Giá trị ban đầu là 0px. Khi di chuột qua .rounded-box, bán kính đường viền sẽ tạo hoạt ảnh thành 20px.
Ví dụ 3: Tạo hoạt ảnh cho Độ lệch bóng
Giả sử bạn muốn tạo hoạt ảnh cho độ lệch ngang của bóng hộp.
@property --shadow-offset-x {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.shadowed-box {
box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
transition: --shadow-offset-x 0.3s ease;
}
.shadowed-box:hover {
--shadow-offset-x: 10px;
}
Trong trường hợp này, --shadow-offset-x được đăng ký là một <length> và giá trị ban đầu của nó là 0px. Thuộc tính box-shadow sử dụng thuộc tính tùy chỉnh này cho độ lệch ngang của nó. Khi di chuột, độ lệch sẽ tạo hoạt ảnh thành 10px.
Ví dụ 4: Sử dụng <custom-ident> cho Chủ đề
Cú pháp <custom-ident> cho phép bạn xác định một tập hợp các giá trị chuỗi được xác định trước, tạo hiệu quả một enum cho các biến CSS của bạn. Điều này hữu ích cho việc tạo chủ đề hoặc kiểm soát các trạng thái riêng biệt.
@property --theme {
syntax: '<custom-ident>';
inherits: true;
initial-value: light;
}
:root {
--theme: light; /* Default Theme */
}
body {
background-color: var(--theme) == light ? #fff : #333;
color: var(--theme) == light ? #000 : #fff;
}
.dark-theme {
--theme: dark;
}
Ở đây, --theme được đăng ký với cú pháp <custom-ident>. Mặc dù chúng tôi không liệt kê rõ ràng các định danh được phép trong chính quy tắc @property, nhưng mã ngụ ý chúng là `light` và `dark`. Sau đó, CSS sử dụng logic điều kiện (var(--theme) == light ? ... : ...) để áp dụng các kiểu khác nhau dựa trên chủ đề hiện tại. Thêm lớp `dark-theme` vào một phần tử sẽ chuyển chủ đề sang tối. Lưu ý rằng logic điều kiện sử dụng `var()` không phải là CSS tiêu chuẩn và thường yêu cầu bộ tiền xử lý hoặc JavaScript. Một cách tiếp cận tiêu chuẩn hơn sẽ sử dụng các lớp CSS và xếp tầng:
@property --theme {
syntax: '<custom-ident>';
inherits: true;
initial-value: light;
}
:root {
--theme: light;
}
body {
background-color: #fff;
color: #000;
}
body[data-theme="dark"] {
background-color: #333;
color: #fff;
}
/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */
Trong ví dụ sửa đổi này, chúng tôi sử dụng thuộc tính data-theme trên phần tử body để kiểm soát chủ đề. JavaScript (được nhận xét) sẽ được sử dụng để chuyển đổi thuộc tính giữa `light` và `dark`. Đây là một cách tiếp cận mạnh mẽ và tiêu chuẩn hơn để tạo chủ đề với các biến CSS.
Lợi ích của việc sử dụng @property
Sử dụng @property mang lại một số lợi thế:
- Cải thiện khả năng đọc và bảo trì mã: Bằng cách xác định rõ ràng kiểu giá trị dự kiến cho một thuộc tính tùy chỉnh, bạn làm cho mã của mình dễ hiểu hơn và ít bị lỗi hơn.
- Nâng cao khả năng hoạt ảnh:
@propertycho phép chuyển đổi và hoạt ảnh mượt mà cho các thuộc tính tùy chỉnh, mở ra những khả năng mới để tạo giao diện người dùng năng động và hấp dẫn. - Hiệu suất tốt hơn: Trình duyệt có thể tối ưu hóa việc hiển thị các phần tử bằng cách sử dụng các thuộc tính tùy chỉnh đã đăng ký, dẫn đến cải thiện hiệu suất.
- An toàn kiểu: Trình duyệt xác thực rằng giá trị được gán khớp với cú pháp đã khai báo, ngăn chặn hành vi không mong muốn và giúp gỡ lỗi dễ dàng hơn. Điều này đặc biệt hữu ích trong các dự án lớn, nơi có nhiều nhà phát triển đóng góp vào cơ sở mã.
- Giá trị mặc định: Đảm bảo một thuộc tính tùy chỉnh luôn có một giá trị hợp lệ, ngay cả khi nó không được đặt rõ ràng, ngăn ngừa lỗi và cải thiện tính mạnh mẽ của CSS của bạn.
Khả năng tương thích của trình duyệt
Tính đến cuối năm 2023, @property có khả năng hỗ trợ trình duyệt tốt, nhưng không phải là phổ quát. Nó được hỗ trợ trong hầu hết các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge. Tuy nhiên, các trình duyệt cũ hơn có thể không hỗ trợ nó. Luôn kiểm tra thông tin tương thích trình duyệt mới nhất trên các trang web như Can I use... trước khi sử dụng @property trong sản xuất.
Để xử lý các trình duyệt cũ hơn, bạn có thể sử dụng các truy vấn tính năng (@supports) để cung cấp các kiểu dự phòng:
@supports (--property: value) {
/* Styles that use @property */
}
@supports not (--property: value) {
/* Fallback styles for browsers that don't support @property */
}
Thay thế --property và value bằng một thuộc tính tùy chỉnh thực tế và giá trị của nó.
Khi nào nên sử dụng @property
Hãy cân nhắc sử dụng @property trong các trường hợp sau:
- Khi bạn cần tạo hoạt ảnh cho các thuộc tính tùy chỉnh: Đây là trường hợp sử dụng chính cho
@property. Đăng ký thuộc tính với cú pháp chính xác cho phép hoạt ảnh mượt mà. - Khi bạn muốn thực thi tính an toàn kiểu cho các thuộc tính tùy chỉnh: Nếu bạn muốn đảm bảo rằng một thuộc tính tùy chỉnh luôn giữ một giá trị thuộc một kiểu cụ thể, hãy sử dụng
@propertyđể đăng ký nó. - Khi bạn muốn cung cấp một giá trị mặc định cho một thuộc tính tùy chỉnh: Bộ mô tả
initial-valuecho phép bạn chỉ định một giá trị dự phòng. - Trong các dự án lớn:
@propertytăng cường khả năng bảo trì mã và ngăn ngừa lỗi, làm cho nó đặc biệt có lợi cho các dự án lớn với nhiều nhà phát triển. - Khi tạo các thành phần hoặc hệ thống thiết kế có thể tái sử dụng:
@propertycó thể giúp đảm bảo tính nhất quán và khả năng dự đoán trên các thành phần của bạn.
Những lỗi thường gặp cần tránh
- Quên bộ mô tả
syntax: Nếu không có bộ mô tảsyntax, trình duyệt sẽ không biết kiểu giá trị dự kiến và hoạt ảnh sẽ không hoạt động chính xác. - Sử dụng giá trị
syntaxsai: Chọn cú pháp sai có thể dẫn đến hành vi không mong muốn. Đảm bảo chọn cú pháp phản ánh chính xác kiểu giá trị dự kiến. - Không cung cấp
initial-value: Nếu không có giá trị ban đầu, thuộc tính tùy chỉnh có thể không được xác định, dẫn đến lỗi. Luôn cung cấp một giá trị mặc định hợp lý. - Lạm dụng
*làm cú pháp: Mặc dù thuận tiện, nhưng sử dụng*phủ nhận những lợi ích của việc kiểm tra kiểu và hoạt ảnh. Chỉ sử dụng nó khi bạn thực sự cần cho phép bất kỳ loại giá trị nào. - Bỏ qua Khả năng tương thích của trình duyệt: Luôn kiểm tra khả năng tương thích của trình duyệt và cung cấp các kiểu dự phòng cho các trình duyệt cũ hơn.
@property và CSS Houdini
@property là một phần của một tập hợp các API lớn hơn được gọi là CSS Houdini. Houdini cho phép các nhà phát triển khai thác vào công cụ hiển thị của trình duyệt, mang lại cho họ khả năng kiểm soát chưa từng có đối với quá trình tạo kiểu và bố cục. Các API Houdini khác bao gồm:
- Paint API: Cho phép bạn xác định hình nền và đường viền tùy chỉnh.
- Animation Worklet API: Cung cấp một cách để tạo các hoạt ảnh hiệu suất cao chạy trực tiếp trong luồng trình tổng hợp của trình duyệt.
- Layout API: Cho phép bạn xác định các thuật toán bố cục tùy chỉnh.
- Parser API: Cung cấp quyền truy cập vào trình phân tích cú pháp CSS của trình duyệt.
@property là một API Houdini tương đối đơn giản để học, nhưng nó mở ra cánh cửa để khám phá các tính năng Houdini nâng cao hơn.
Kết luận
@property là một quy tắc CSS mạnh mẽ mở ra các khả năng nâng cao cho các thuộc tính tùy chỉnh. Bằng cách đăng ký các thuộc tính tùy chỉnh với trình duyệt, bạn có thể thực thi tính an toàn kiểu, cho phép hoạt ảnh mượt mà và cải thiện tính mạnh mẽ tổng thể của mã CSS của bạn. Mặc dù khả năng hỗ trợ trình duyệt không phải là phổ quát, nhưng những lợi ích của việc sử dụng @property, đặc biệt là trong các dự án lớn và hệ thống thiết kế, làm cho nó trở thành một công cụ có giá trị cho phát triển web hiện đại. Nắm bắt @property và nâng kỹ năng CSS của bạn lên một tầm cao mới!